<template>
	<view class="">
		<view class="lists">
			<view class="list">
				<view class="left">
					姓名
				</view>
				<view class="right">
					<input class="inp" type="text" 	 placeholder="姓名" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					性别
				</view>
				<view class="right">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio name="男" :disabled="form.sex">
							男
						</u-radio>
						<u-radio name="女" :disabled="form.sex">
							女
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="list">
				<view class="left">
					电话
				</view>
				<view class="right">
					<input class="inp" type="text" placeholder="电话" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					年龄
				</view>
				<view class="right">
					<input class="inp" type="text" placeholder="年龄" />
				</view>
			</view>

			<view class="list">
				<view class="left">
					服务报备项目
				</view>
				<view class="right">
					<u-input class="inp" border-color='#999' height="60" v-model="servevalue" type="select" :border='true'
						@click="show = true" />
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback">
					</u-action-sheet>
				</view>
			</view>
			<view class="list">
				<view class="left">
					备注
				</view>
				<view class="right">
					<input class="inp" type="text"  placeholder="学历" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					是否安排用餐
				</view>
				<view class="right">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio name="是" :disabled="form.chi">
							是
						</u-radio>
						<u-radio name="否" :disabled="form.chi">
							否
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="list">
				<view class="left">
					报备日期
				</view>
				<view class="right">
					<input class="inp" type="text" placeholder="报备日期" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					报备时间
				</view>
				<view class="right">
					<input class="inp" type="text" placeholder="报备时间" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					出发地址
				</view>
				<view class="right">
					<input class="inp" type="text" placeholder="出发地址" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					出发时间
				</view>
				<view class="right">
					<input class="inp" type="text"  placeholder="出发时间" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					出行方式
				</view>
				<view class="right">
				<u-input class="inp" border-color='#999' height="60" v-model="tripvalue" type="select" :border='true'
					@click="show1 = true" />
				<u-action-sheet :list="tripList" v-model="show1" @click="actionSheetCallback1">
				</u-action-sheet>
				</view>
			</view>
			<view class="list">
				<view class="left">
					到达日期
				</view>
				<view class="right">
					<input class="inp" type="text" placeholder="日期" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					推荐人
				</view>
				<view class="right">
					<input class="inp" type="text"  placeholder="姓名" />
				</view>
			</view>
			<view class="list">
				<view class="left">
					推荐人手机号
				</view>
				<view class="right">
					<input class="inp" type="text"  placeholder="手机号" />
				</view>
			</view>

		</view>
		
		<!-- 提交 -->
		<view class="submit" @click="btn">
			提交
		</view>
		<view class="span">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					intro: '',
					sex: '',
					chi:''
				},
				radio: '',
				value:'',
				servevalue: '',//服务报备选项  返回值
				tripvalue:'',//出行方式 返回值
				show: false,
				show1:false,//出行方式 显示
				actionSheetList: [{
						text: '一手房'
					},
					{
						text: '政策房'
					},
					{
						text: '租房'
					},
					{
						text: '培训(会议)'
					},
					{
						text: '旅游(文旅)'
					},
					{
						text: '其他'
					}
				],
				tripList:[{ ////出行方式列表
					text:'班车'
				},
				{
					text:'接送'
				},{
					text:'私家车'
				}]
			};
		},
		methods: {
			btn(){
				uni.navigateTo({
					url:'../succeed/succeed'
				})
			},
			// 单选
			radioGroupChange(e) {
				console.log(e);
			},
			// /服务报备选项
			actionSheetCallback(e){
				this.servevalue = this.actionSheetList[e].text;
			},
			//出行方式
			actionSheetCallback1(e){
				this.tripvalue = this.actionSheetList[e].text;
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.lists {
		.list {
			display: flex;
			background-color: #FFFFFF;
			margin: 20rpx 0;
			padding: 20rpx 0;

			.left {
				width: 40%;
				text-align: left;
				font-size: 28rpx;
				line-height: 60rpx;
				margin-left: 50rpx;
				font-weight: 550;
			}

			.right {
				width: 60%;

				.inp {
					width: 360rpx;
					height: 60rpx;
					border: 2rpx solid #999;
					padding-left: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.main {
		background-color: #FFFFFF;
		padding: 10rpx;

	}

	.group {
		width: 500rpx;
		margin: 10rpx auto;
	}

	.qm {
		margin: 40rpx auto;
		width: 400rpx;
		height: 220rpx;
	}

	.submit {
		width: 300rpx;
		height: 75rpx;
		line-height:75rpx;
		margin: auto;
		border-radius: 50rpx;
		background-color: rgba(113, 164, 255, 100);
		text-align: center;
		border: 2rpx solid rgba(255, 255, 255, 100);
		color: #fff;
	}

	.span {
		height: 80rpx;
	}
</style>
